<script setup>
import { ref, inject, onMounted } from 'vue';

const router = inject('$router'),
	props = defineProps({
		menus: {
			type: Array,
			required: true,
		},
		collapse: {
			type: Boolean,
			default: false
		}
	});

let defaultIndex = ref(null);

const getIcon = function (icon) {
	let pack;
	if (icon.indexOf(' ') === -1) {
		pack = ['fas', icon];
	} else {
		pack = icon.split(' ');
	}
	return pack;
}

onMounted(() => {
	const path = router.currentRoute.value.path;
	defaultIndex.value = path
});
</script>

<template>
	<el-menu router class="main-aside-menu" unique-opened :collapse="props.collapse" text-color="#fff"
		background-color="#545c64" active-text-color="#ffd04b" :default-active="defaultIndex">
		<el-menu-item index="/">
			<font-awesome-icon class="fa-icon" size="lg" :icon="['fas','fa-home']" />
			<span>首页</span>
		</el-menu-item>
		<template v-for="menu in props.menus">
			<el-sub-menu v-if="menu['children']" :index="`${menu.id}`">
				<template #title>
					<font-awesome-icon class="fa-icon" size="lg" :icon="getIcon(menu.meta.icon)" />
					<span>{{ menu.meta.title }}</span>
				</template>
				<el-menu-item v-for="submenu in menu.children" :key="submenu.id" :index="submenu.path">
					<font-awesome-icon class="fa-icon" :icon="getIcon(submenu.meta.icon)" />
					<span>{{ submenu.meta.title }}</span>
				</el-menu-item>
			</el-sub-menu>
			<el-menu-item v-else :index="menu.path">
				<font-awesome-icon class="fa-icon" size="lg" :icon="getIcon(menu.meta.icon)" />
				<span>{{ menu.meta.title }}</span>
			</el-menu-item>
		</template>
	</el-menu>
</template>